<template>
  <menus-container title="定量模型对比更新">
    <el-row style="align-items: center">
      <div
        v-for="(img, index) in models"
        :key="index"
        class="image-item"
        :class="{ selected: selectedModelIndex === index }"
        @click="selectedModelIndex = index"
      >
        <el-image :src="img.img" fit="fill" style="height: 100%; width: 100%" />
        <div v-if="selectedModelIndex === index" class="check-mark"></div>
      </div>
      <el-button style="margin-left: 5px" @click="onAddGeometry"
        >添加模型到场景</el-button
      >
    </el-row>
    <el-divider border-style="dashed" />
    <el-row>
      <el-button :disabled="!selectEditFlag" @click="onReplaceGeometry">
        替换模型
      </el-button>
      <el-popconfirm title="是否删除该模型对象" @confirm="onDeleteGeometry">
        <template #reference>
          <el-button :disabled="!selectEditFlag">删除模型</el-button>
        </template>
      </el-popconfirm>
    </el-row>
    <el-divider border-style="dashed" />
    <el-row>
      <el-button @click="onUpdateDataset">更新数据集</el-button>
      <el-button @click="onUpdateS3MB">更新瓦片</el-button>
      <el-button @click="onResetAll">重置所有</el-button>
    </el-row>
  </menus-container>
</template>

<script lang="ts" setup>
import {} from 'vue'
import MenusContainer from '/@src/components/menus-container/menus-container.vue'
import useModelEdite from './use-model-edit'

const {
  models,
  selectedModelIndex,
  selectEditFlag,
  onDeleteGeometry,
  onReplaceGeometry,
  onAddGeometry,
  onUpdateDataset,
  onUpdateS3MB,
  onResetAll
} = useModelEdite()
</script>

<style scoped lang="scss">
@import url('./model-edit.scss');
</style>
